<template>
  <!-- AGV控制页面 -->
  <div class="page-shaker">
    <div class="ChartSwitch-box">


      <div class="datasend">
        <div class="databutton">

          <el-button class="stop" @click="stophmove">停止移动</el-button>
          <el-button type='primary' @click="starthmove">开始移动</el-button>
          <el-button type='primary' @click="gozero">去低位</el-button>
          <el-button type='primary' @click="gocenter">去中位</el-button>
          <el-button type='success' @click="openh">连接PI</el-button>
          <!-- <el-button @click="hnowstatus">查看H840波形</el-button> -->
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane class="title" label="绝对值运行模式" name="first">
            <div class="controlbox">
              <div class="title">目标位置</div>
              <div class="block-x">
                <div class="block_title">
                  X[mm]
                </div>
                <div class="block">
                  <el-slider v-model="shake.xp" :min="shakep[0]['p_min']" :max="shakep[0]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.xv" :min="shakespeed[0]['v_min']" :max="shakespeed[0]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>
              <div class="block-x">
                <div class="block_title">
                  Y[mm]
                </div>
                <div class="block">
                  <el-slider v-model="shake.yp" :min="shakep[1]['p_min']" :max="shakep[1]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.yv" :min="shakespeed[1]['v_min']" :max="shakespeed[1]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>
              <div class="block-x">
                <div class="block_title">
                  Z[mm]
                </div>
                <div class="block">
                  <el-slider v-model="shake.zp" :min="shakep[2]['p_min']" :max="shakep[2]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.zv" :min="shakespeed[2]['v_min']" :max="shakespeed[2]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>
              <div class="block-x">
                <div class="block_title">
                  U - Roll[°]
                </div>
                <div class="block">
                  <el-slider v-model="shake.up" :min="shakep[3]['p_min']" :max="shakep[3]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.uv" :min="shakespeed[3]['v_min']" :max="shakespeed[3]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>

              <div class="block-x">
                <div class="block_title">
                  V - Pitch[°]
                </div>
                <div class="block">
                  <el-slider v-model="shake.vp" :min="shakep[4]['p_min']" :max="shakep[4]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.vv" :min="shakespeed[4]['v_min']" :max="shakespeed[4]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>




              <div class="block-x">
                <div class="block_title">
                  W - Yaw[°]
                </div>
                <div class="block">
                  <el-slider v-model="shake.wp" :min="shakep[5]['p_min']" :max="shakep[5]['p_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-x">
                <div class="block_title">速度设置</div>
                <div class="block">
                  <el-slider v-model="shakev.wv" :min="shakespeed[5]['v_min']" :max="shakespeed[5]['v_max']" show-input>
                  </el-slider>
                </div>
              </div>
              <!-- <div class="block-x">
                <div class="block_title">运动模式</div>
                <el-switch color="#fff" v-model="mc.mxmc" active-color="#13ce66" inactive-color="#ff4949"
                  active-text="绝对运动" inactive-text="相对运动">
                </el-switch>
              </div> -->

            </div>
          </el-tab-pane>
          <el-tab-pane class="title" label="正弦波运行模式" name="second">
            <div class="controlbox">
              <div class="block-y">
                <div class="block_title">

                </div>

                <div class="block">
                  幅值[mm]
                </div>
                <div class="block">
                  频率[Hz]
                </div>



              </div>
              <div class="block-y">
                <div class="block_title">
                  X
                </div>

                <div class="block">
                  <el-slider v-model="amplitude[0]" :min="sp[0]['a_min']" :max="sp[0]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[0]" :min="hz[0]['f_min']" :max="hz[0]['f_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-y">
                <div class="block_title">
                  Y
                </div>

                <div class="block">
                  <el-slider v-model="amplitude[1]" ::min="sp[1]['a_min']" :max="sp[1]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[1]" :min="hz[1]['f_min']" :max="hz[1]['f_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-y">
                <div class="block_title">
                  Z
                </div>

                <div class="block">
                  <el-slider v-model="amplitude[2]" :min="sp[2]['a_min']" :max="sp[2]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[2]" :min="hz[2]['f_min']" :max="hz[2]['f_max']" show-input>
                  </el-slider>
                </div>

              </div>
              <div class="block-y">
                <div class="block_title">

                </div>

                <div class="block">
                  幅值[°]
                </div>
                <div class="block">
                  频率[Hz]
                </div>

              </div>

              <div class="block-y">
                <div class="block_title">
                  U - Roll

                </div>

                <div class="block">
                  <el-slider v-model="amplitude[3]" :min="sp[3]['a_min']" :max="sp[3]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[3]" show-input :min="hz[3]['f_min']" :max="hz[3]['f_max']">
                  </el-slider>
                </div>

              </div>
              <div class="block-y">
                <div class="block_title">
                  V -Pitch
                </div>

                <div class="block">
                  <el-slider v-model="amplitude[4]" :min="sp[4]['a_min']" :max="sp[4]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[4]" show-input :min="hz[4]['f_min']" :max="hz[4]['f_max']">
                  </el-slider>
                </div>


              </div>
              <div class="block-y">
                <div class="block_title">
                  W - Yaw
                </div>

                <div class="block">
                  <el-slider v-model="amplitude[5]" :min="sp[5]['a_min']" :max="sp[5]['a_max']" show-input>
                  </el-slider>
                </div>
                <div class="block">
                  <el-slider v-model="frequency[5]" show-input :min="hz[5]['f_min']" :max="hz[5]['f_max']">
                  </el-slider>
                </div>

              </div>



            </div>
          </el-tab-pane>
          <el-tab-pane label="文件运行模式" name="third">
            <div class="controlbox">
              <div class="title_x">选择运行文件</div>
              <!-- {{  FileName}} -->
              <el-select v-model="FileName">
                <el-option v-for="(item, key) in shakerFileName" :key="key" :label="item" :value="key">
                </el-option>
              </el-select>
              <!-- <el-upload class="upload-demo" action="api/Getuploadfile" :on-remove="handleRemove"
                :on-change="handleChange" multiple :limit="1" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> -->

            </div>


          </el-tab-pane>


        </el-tabs>

      </div>
      <div class="databox">
        <div class="shapedata">
          <div class="title">当前姿态数据</div>
          <div class="datadetail">
            <div class="block-x">
              <div class="block_title">
                X
              </div>
              <div class="block">
                <el-slider v-model="nows[0]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>
            <div class="block-x">
              <div class="block_title">
                Y
              </div>
              <div class="block">
                <el-slider v-model="nows[1]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>
            <div class="block-x">
              <div class="block_title">
                Z
              </div>
              <div class="block">
                <el-slider v-model="nows[2]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>
            <div class="block-x">
              <div class="block_title">
                U - Roll
              </div>
              <div class="block">
                <el-slider v-model="nows[3]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>
            <div class="block-x">
              <div class="block_title">
                V - Pitch
              </div>
              <div class="block">
                <el-slider v-model="nows[4]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>
            <div class="block-x">
              <div class="block_title">
                W - Yaw
              </div>
              <div class="block">
                <el-slider v-model="nows[5]" disabled show-input :show-input-controls="false" input-size="mini">
                </el-slider>
              </div>

            </div>

            <div class="block-x">
              <div class="block_title">
                位置状态:
              </div>

              <el-input placeholder="请输入内容" v-model="listallh.PlatformReset" :disabled="true">
              </el-input>

            </div>
            <div class="block-x">
              <div class="block_title">
                运行状态:
              </div>

              <el-input placeholder="请输入内容" v-model="listallh.PlatformReady" :disabled="true">
              </el-input>

            </div>
            <div class="longerror">
              <div class="block_title">
                设备状态:
              </div>

              <el-input placeholder="请输入内容" v-model="listallh.msg" :disabled="true">
              </el-input>

            </div>
          </div>
        </div>

      </div>

      <!-- </div> -->




    </div>

  </div>
</template>

<script>
import { ajax } from "@/utils/ajax";

// 导入 agv 所有接口
import { agvApis } from "@/utils/apis";
import { parseGeoJSON, time } from "echarts";

export default {
  data() {
    let self = this
    return {
      amplitude:[],
      frequency:[],
      shakep: [],
      sp: [],
      hz: [],
      shakespeed: [],
      FileName: 0,
      shakerFileName: ["手持静态", "手持走路", "handshake-I",
        "DSLRSTILLM", "KPSTILL2W", "KPWALKS15W",],
      flag: false,
      pistart: 'info',
      pizero: 'info',
      option: {
        color: ['#4DFFB2', '#FFF84D', '#FF4DF5', '#FF5B5B', '#5BA4FF', '#5BFF63'],
        title: {
          text: ''
        },
        tooltip: { //提示框
          trigger: 'axis',
        },
        legend: {//图例的类型
          icon: 'roundRect',//图例icon图标
          data: [
          ],

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'time', //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          axisLabel: {//坐标轴刻度标签的相关设置
            interval: 0,
            // formatter: function (value, index) {

            //     return self.unix2hm(value)
            // },
            textStyle: {
              color: '#fff',
              fontSize: 10
            },
          },
          axisLine: {//坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: 'rgb(2,121,253)'
            }
          },
          axisTick: { //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            show: false
          }

        },
       
        yAxis: {
          type: 'value',
          axisLabel: { //x轴的坐标文字
            show: true,
            textStyle: {
              color: '#fff' //文字的颜色
            },

          },
          // max: 5,//最大值100
          axisLine: {//坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: 'rgb(2,121,253)'
            }
          },
          axisTick: { //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {  //坐标在grid区域的分割线
            lineStyle: { //设置分割线的样式(图表横线颜色)
              color: ['#153a8a']
            }
          }
        },
        series: [
          {
            name: 'X',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#4DFFB2'  //线的颜色
            }
          },
          {
            name: 'Y',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#FFF84D' //线的颜色
            }
          },
          {
            name: 'Z',
            type: 'line',
            smooth: true,

            data: [],
            lineStyle: {
              color: '#FF4DF5' //线的颜色
            }
          },
          {
            name: 'U-Roll',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#FF5B5B' //线的颜色
            }
          },
          {
            name: 'V-Pitch',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#5BA4FF' //线的颜色
            }
          },
          {
            name: 'W-Yaw',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#5BFF63' //线的颜色
            }
          }
        ]
      },
      optionbench: {
        color: ['#4DFFB2', '#FFF84D', '#FF4DF5', 'rgb(255, 91, 91)'],
        title: {
          text: ''
        },
        tooltip: { //提示框
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {//图例的类型
          icon: 'roundRect',//图例icon图标
          data: [
          ],

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'time', //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          axisLabel: {//坐标轴刻度标签的相关设置
            interval: 0,
            // formatter: function (value, index) {

            //     return self.unix2hm(value)
            // },
            textStyle: {
              color: '#fff',
              fontSize: 10
            },
          },
          axisLine: {//坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: 'rgb(2,121,253)'
            }
          },
          axisTick: { //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            show: false
          }

        },
        yAxis: {
          type: 'value',
          axisLabel: { //x轴的坐标文字
            show: true,
            textStyle: {
              color: '#fff' //文字的颜色
            },

          },
          // max: 5,//最大值100
          axisLine: {//坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: 'rgb(2,121,253)'
            }
          },
          axisTick: { //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {  //坐标在grid区域的分割线
            lineStyle: { //设置分割线的样式(图表横线颜色)
              color: ['#153a8a']
            }
          }
        },
        series: [
          {
            name: 'X',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#4DFFB2'  //线的颜色
            }
          },
          {
            name: 'Y',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              color: '#FFF84D' //线的颜色
            }
          },
          {
            name: 'Z',
            type: 'line',
            smooth: true,

            data: [],
            lineStyle: {
              color: '#FF4DF5' //线的颜色
            }
          },
          {
            name: 'follow',
            type: 'line',
            smooth: true,

            data: [],
            lineStyle: {
              color: 'rgb(255, 91, 91)' //线的颜色
            }
          },

        ]
      },
      activeName: 'first',
      // vedio_value: false,
      sevon: false,
      simpledata: [],
      simple: '',
      isnormal: true,
      read_outbit: 0,
      zero: {
        status: 'success',
        title: '归零',
      },
      follow_value: false,
      // kino_value: false,
      isShowchart: false,
      isShowbench: false,
      photocount: '',
      photosecond: '',
      // timer_value: false,
      // amo_value: false,
      chartposition: '',
      pm: '',
      benchall: [],
      isShowdata: false,
      MainBench: {
        v: '100',
        p: '3000',
        pp: '',
        pmax: 0,
        pmin: 0,
      },
      MainBenchl: {
        v: '100',
        p: '3000',
        pp: '',
        pmax: 0,
        pmin: 0
      },
      FollowBench: {
        v: '100',
        p: '3000',
        pp: '',
        pmax: 0,
        pmin: 0,
      },

      MainBenchUD: {
        v: '10',
        p: '',
        pp: '',
        pmax: 0,
        pmin: 0,
      },
      video: {
        v: '',
        p: '',
        pp: '100',
      },
      RRotateMove: {
        v: '10',
        degree: '45',
        pp: '',
      },
      LRotateMove: {
        v: '10',
        degree: '-45',
        pp: '',
      },

      ChartSwitch: '',
      chart_number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      // chart_numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      chart: [],
      fileList: [],
      fileLists: [],
      Position_number: [1, 2, 3, 4, 5, 6],
      LXBench: {
        v: '100',
        p: '1500',
        pp: '',
      },
      LYBench: {
        v: '100',
        p: '0',
        pp: '',
      },
      RXBench: {
        v: '100',
        p: '1500',
        pp: '',
      },
      RYBench: {
        v: '100',
        p: '1000',
        pp: '',
      },
      isShow: false,
      isShow1: false,
      isShowwin: false,
      tag: '<el-tag type="success">标签二</el-tag>',
      nows: {
        xp: 0,
        xv: 0,
        yp: 0,
        yv: 0,
        zp: 0,
        zv: 0,
        xu: 0,
        yu: 0,
        up: 0,
        uv: 0,
        vp: 0,
        vv: 0,
      },
      nowm: {
        x: 0,
        y: 0,
        z: 0,
        u: 0,
        v: 0,
        w: 0,
      },
      listallh: {
        PlatformReset: 'false',
        PlatformReady: 'false',
        SineWave: false,
        MoveState: false,
        msg: '',
      },
      shake: {
        xp: 0,
        yp: 0,
        zp: 0,
        xu: 0,
        up: 0,
        vp: 0,
        v: 30,
      },
      shakev: {
        xv: 30,
        yv: 30,
        zv: 30,
        uv: 30,
        vv: 30,
        wv: 30,
      },
      sine: {
        xh: 0,
        xa: 0,
        xp: 0,
        yh: 0,
        ya: 0,
        yp: 0,
        zh: 0,
        za: 0,
        zp: 0,
        uh: 0,
        ua: 0,
        up: 0,
        vh: 0,
        va: 0,
        vp: 0,
        wh: 0,
        wa: 0,
        wp: 0,
        xcount: '10',
        ycount: '10',
        zcount: '10',
        ucount: '10',
        vcount: '10',
        wcount: '10',
      },
      // mc: { mxsv: 0.0, mxvt: 1.0, mxrt: 1.0, mxev: 1.0, mysv: 0.0, myvt: 1.0, myrt: 1.0, myev: 1.0, mzsv: 0.0, mzvt: 1.0, mzrt: 1.0, mzev: 1.0, mfsv: 0.0, mfvt: 1.0, mfrt: 1.0, mfev: 1.0,mxmc:false,mymc:true,mzmc:true,mfmc:false}
      mc: [],
      // initEarcharts,
      // initWebsocket,
    }
  },
  created() {
    this.setupWebSocket();
    this.GetDeviceStateStr()
    this.GetDevicePos()
    this.GetDeviceState()
    this.GetPositionRange()
    this.GetSpeedRange()
    this.GetAmplitudeRange()
    this.GetFrequencyRange()

  },
  beforeDestroy() {
    this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
  },

  watch: {},

  computed: {},

  methods: {
    GetDeviceStateStr() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetDeviceStateStr"
        )
        .then((res) => {
          if (res.data.code == 100) {


            this.listallh.msg = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },
    GetDeviceState() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetDeviceState"
        )
        .then((res) => {
          if (res.data.code == 100) {

            if (res.data.data == 0) {
              this.listallh.PlatformReady = '停止'
            } else {
              this.listallh.PlatformReady = '运行中'
            }


          } else {

            this.$message(res.data.msg);
          }
        });
    },
    GetDevicePos() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetDevicePos"
        )
        .then((res) => {
          if (res.data.code == 100) {
            if (res.data.data == 0) {
              this.listallh.PlatformReset = '低位'
            }
            else if (res.data.data == 1) {
              this.listallh.PlatformReset = '中位'
            }
            else {
              this.listallh.PlatformReset = '其他位置'
            }

            // this.listallh.PlatformReset = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },
    setupWebSocket() {
      this.websocket = new WebSocket("ws://10.10.10.66:8000/socket/JiaLiang/"); // 创建WebSocket连接
      this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
    },
    onWebSocketOpen() {
      console.log("链接成功");
    },
    onWebSocketMessage(event) {
      var message = event.data;
      var dictionary = JSON.parse(message);
      // console.log(
      //   "message",
      //   // dictionary.message.index,
      //   dictionary.message.location
      // );
      this.nows = dictionary.message.location;
      // console.log(this.bench[dictionary.message.index]["s"]);
      // this.bench[dictionary.message.index]['position'] = dictionary.message.location

      // 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
    },

    closeWebSocket() {
      if (this.websocket) {
        this.websocket.close(); // 关闭WebSocket连接
      }
    },
    hstatus() {
      ajax
        .get("api/" + DxocontrolApis.hstatus)
        .then((res) => {
          this.nows = res.data;
          // this.listallhstatus();
        })
        .catch((err) => { });
    },
    starthmove() {
      if (this.activeName == 'third') {

        ajax
          .post(
            this.$settings.BASE_URL_CMS +
            `JiaLiang_Shaker/Shaker/MoveAxisWithFile/`,
            {

              file_index: parseFloat(this.FileName)
            })
          .then((res) => {
            this.hstatus();

          })
          .catch((err) => { });
      }
      if (this.activeName == 'second') {
        ajax
          .post(
            this.$settings.BASE_URL_CMS +
            `JiaLiang_Shaker/Shaker/MoveAxisWithSineWave/`,
            {
            
              amplitude:JSON.stringify(this.amplitude),
              frequency:JSON.stringify(this.frequency)
            })
          .then((res) => {
            this.hstatus();

          })
          .catch((err) => { });
        // ajax
        //   .get("api/" + DxocontrolApis.Startwithsine + `?xh=${this.sine.xh}&yh=${this.sine.yh}&zh=${this.sine.zh}&uh=${this.sine.uh}&vh=${this.sine.vh}&wh=${this.sine.wh}&xa=${this.sine.xa}&ya=${this.sine.ya}&za=${this.sine.za}&ua=${this.sine.ua}&va=${this.sine.va}&wa=${this.sine.wa}&xp=${this.sine.xp}&yp=${this.sine.yp}&zp=${this.sine.zp}&up=${this.sine.up}&vp=${this.sine.vp}&wp=${this.sine.wp}&xc=${this.sine.xcount}&yc=${this.sine.ycount}&zc=${this.sine.zcount}&uc=${this.sine.ucount}&vc=${this.sine.vcount}&wc=${this.sine.wcount}`)
        //   .then((res) => {
        //     this.hstatus();

        //   })
        //   .catch((err) => { });
      }
      if (this.activeName == 'first') {
        ajax
          .post(
            this.$settings.BASE_URL_CMS +
            `JiaLiang_Shaker/Shaker/MoveAxisWithPositionAndSpeed/`,
            {
              position: JSON.stringify(this.shake),
              speed: JSON.stringify(this.shakev),
              
             
            })
          .then((res) => {
            this.hstatus();

          })
          .catch((err) => { });
      }


    },
    stophmove() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/MoveStopWithSlowly"
        )
        .then((res) => {
          if (res.data.code == 100) {

            this.$message({
              message: res.data.msg,
              type: "success",
            });


          } else {

            this.$message(res.data.msg);
          }
        });
    },
    openh() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/connect"
        )
        .then((res) => {
          if (res.data.code == 100) {

            this.$message({
              message: res.data.msg,
              type: "success",
            });

            this.pistart = 'success'
            this.setupWebSocket();
          } else {

            this.$message(res.data.msg);
          }
        });
    },
    GetPositionRange() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetPositionRange"
        )
        .then((res) => {
          if (res.data.code == 100) {
            console.log(res.data.data, '-------------------')
            this.shakep = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },
    GetSpeedRange() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetSpeedRange"
        )
        .then((res) => {
          if (res.data.code == 100) {
            console.log(res.data.data, '-------------------')
            this.shakespeed = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },
    GetFrequencyRange() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetFrequencyRange"
        )
        .then((res) => {
          if (res.data.code == 100) {
            console.log(res.data.data, '-------------------')
            this.hz = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },

    GetAmplitudeRange() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/GetAmplitudeRange"
        )
        .then((res) => {
          if (res.data.code == 100) {
            console.log(res.data.data, '-------------------')
            this.sp = res.data.data

          } else {

            this.$message(res.data.msg);
          }
        });
    },

    gozero() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/MoveToLowPos"
        )
        .then((res) => {
          if (res.data.code == 100) {

            this.$message({
              message: res.data.msg,
              type: "success",
            });


          } else {

            this.$message(res.data.msg);
          }
        });
    },
    gocenter() {
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Shaker/Shaker/MoveToCentrePos"
        )
        .then((res) => {
          if (res.data.code == 100) {

            this.$message({
              message: res.data.msg,
              type: "success",
            });


          } else {

            this.$message(res.data.msg);
          }
        });
    },

  }
};
</script>

<style lang="less">
.stop {
  color: red;
}

.el-message-box {
  background-color: #161d26;
  border: #1f2935;
}

.ChartSwitch-box {
  float: left;
  width: @w*900vw;
  height: @h*1000vh;
  //background: #404040;
  //padding: 0 @w*30vw;

  .mbcontrol {
    height: @h*76vh;
    border-bottom: 1px solid #4D4D4D;

    .title {
      float: left;
      width: @w*150vw;
      height: @h*75vh;
      font-size: @h*24vh;
      font-family: Source Han Sans CN;
      // font-weight: bold;
      color: #FFFFFF;
      line-height: @h*76vh;
    }
  }

  .morecontrol {
    float: left;
    background: none;
    border: 0;
    font-size: @h*12vh;
    font-family: Source Han Sans CN;

    line-height: @h*76vh;
    margin: 0 @w*20vw;
    padding: 0;



  }





  .databox {
    float: left;
    width: @w*900vw;
    height: @h*500vh;

    .shapedata {
      width: @w*1200vw;
      margin: @h*20vh @w*20vw;
      float: left;

      .datadetail {
        float: left;
        margin-top: @h*20vh;
        height: @h*400vh;

        .longerror {
          float: left;
          width: @w*900vw;
          height: @h*50vh;
          line-height: @h*50vh;

          .block_title {

            min-width: @w*65vw;
            float: left;
            margin: @h*2vh 0;
          }

          .el-input {
            float: left;
            width: @w*400vw;
            margin: @h*2vh @w*20vw;

            .el-input__inner {
              color: #fff;
              background-color: #333;
            }
          }

        }

        .block-x {
          float: left;
          width: @w*350vw;
          height: @h*80vh;
          line-height: @h*80vh;
          text-align: center;
          margin: @h*5vh @w*5vw;
          ;

          .block {
            width: @w*250vw;
            float: left;
            margin: @h*20vh @w*15vw 0;

            .el-input__inner {
              width: @w*120vw;
              background: #333;
              color: #fff;
            }
          }

          .el-slider__runway.show-input {
            margin-right: @w*120vw
          }

          .block_title {

            min-width: @w*65vw;
            float: left;
            margin: @h*2vh 0;
          }

          .el-input {
            float: left;
            width: @w*160vw;
            margin: @h*2vh @w*15vw;

            .el-input__inner {
              color: #fff;
              background-color: #333;
            }
          }
        }
      }

    }

    .driverdata {
      width: @w*350vw;
      float: left;


      .datadetail {
        float: left;
        height: @h*300vh;

        .block-x {
          float: left;
          width: @w*250vw;
          height: @h*40vh;
          line-height: @h*40vh;
          text-align: center;

          .block_title {

            width: @w*90vw;
            float: left;
            margin: @h*2vh 0;
          }

          .el-input {
            width: @w*80vw;
          }

          input {
            float: left;
            width: @w*80vw;
            background: #333;
            color: #fff;
            text-align: center;

            .el-input__inner {
              background: #333;
            }
          }
        }
      }
    }

    .title {
      width: @w*350vw;
      height: @h*30vh;
      font-size: @h*18vh;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #CCCCCC;
      line-height: @h*30vh;
    }
  }

  .datasend {
    float: left;
    width: @w*900vw;
    height: @h*385vh;
    padding: @h*43vh 0 0 @w*20vw;

    .databutton {
      float: right;
      width: @w*470vw;
      height: @h*43vh;
      // border-bottom: 2px solid #fff;

      .el-button {
        float: right;
        margin: @h*10vh @w*10vw;
        padding: @h*10vh @w*5vw;
        border: 1px solid #4d4d4d;
        color: #fff;
        // background: #409EFF;
        font-size: @h*14vh;
      }

      .el-input {
        float: right;
        margin: @h*5vh @w*10vw;

        border: 1px solid #4d4d4d;
        color: #fff;
        width: @w*45vw;

        font-size: @h*14vh;
      }

      .stop {
        background: red;
      }
    }

    .el-tabs__header {
      width: @w*380vw;
      height: @h*40vh;

      #tab-first {
        padding-left: @w*10vw;
      }

      .el-tabs__item {
        color: #fff
      }

      .el-tabs__item:hover {
        color: #409EFF;
      }
    }

    .el-tabs__content {
      width: @w*900vw;

      .controlbox {
        float: left;
        width: @w*880vw;
        // min-height: @h*50vh;
        // max-height: @h*220vh;
        // border: 1px solid;
        margin: @h*10vh 0;

        .title_x {
          float: left;
          width: @w*150vw;
          line-height: @h*35vh;
          margin: 0 @w*15vw;
        }

        .count {
          float: left;
          width: @w*80vw;
          margin: @w*2vw @h*10vh 0;

          .el-input__inner {
            height: 30px;
            background: #333;
            color: #fff;
            text-align: center;

          }
        }

        // overflow: auto;
        .title {
          float: left;
          height: @h*50vh;
          width: @w*800vw;
          line-height: @h*50vh;
          text-align: center;
        }

        .el-switch {
          float: left;
          margin: @h*13vh @w*15vw;

          .el-switch__label {
            color: #fff;
          }
        }

        .block-x {
          float: left;
          width: @w*440vw;
          height: @h*50vh;
          line-height: @h*50vh;
          text-align: center;

          .block {
            width: @w*200vw;
            float: left;
            margin: @w*2vw @h*15vh 0;

            .el-input__inner {

              background: #333;
              color: #fff;
            }
          }

          .block_title {

            width: @w*100vw;
            float: left;
            margin: @h*2vh 0;
          }
        }

        .block-y {
          float: left;
          width: @w*900vw;
          height: @h*40vh;
          line-height: @h*40vh;
          text-align: center;

          .block {
            width: @w*300vw;
            float: left;
            margin: @h*2vh @w*15vw 0;

            .el-input__inner {

              background: #333;
              color: #fff;
            }
          }

          .block_title {

            width: @w*100vw;
            float: left;
            margin: @h*2vh 0;
          }
        }
      }

      .title_button {

        // margin: 0;
        padding: @h*5vh @w*5vw;
        margin: @h*6vh @w*10vw;
      }

      .mbcontrol_als {
        height: @h*40vh;
        line-height: @h*40vh;
        font-size: @h*12vh;

        color: #ffff;
        float: left;
      }

    }




  }

}
</style>
